<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻</title>
    <style>
        * {
            margin-top: 0;
            padding: 0px;
        }

        .item {
            background-color: #7dffe7;
            color: #ffa500;
            font-size: 18px;
            overflow: hidden;
            border-bottom: 1px solid;
            width: 200px;
            height: 40px;
            line-height: 40px;
            /*transition: background-color linear 1s, height linear 2s;*/
            /*transition: all linear 1s;*/
            transition: all steps(60) 0.5s;
        }

        ul {
            list-style: none;
        }


        .item:hover {
            height: 270px;

        }

        li{
            background-color: #eaffb6;
        }

    </style>
</head>
<body>

<div class="item">
    <h3>市内新闻</h3>

    <ul class="hidden">

        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
    </ul>
</div>

<div class="item">
    <h3>省内新闻</h3>
    <ul class="hidden">

        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
    </ul>

</div>

<div class="item">
    <h3>国内新闻</h3>

    <ul class="hidden">

        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
    </ul>

</div>

<div class="item">
    <h3>国际新闻</h3>

    <ul class="hidden">

        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
        <li>深圳超市肉菜档遭抢</li>
    </ul>

</div>


</body>
</html>